<template>
<view>
	<view class="header">
	    <input @input="search" value="" placeholder="输入客户电话或姓名"/>
	</view>
	<view class="header1" v-if="infoShow">
		<view class="header1_top">
			<text class="name">{{item.username}}</text>
			<text class="phone">{{item.phone}}</text>
		</view>
		<view class="footer">
			<view class="header1_left">
			     <text>总消费</text>
			     <text class="money">{{item.moneyCount}}</text>
			 </view>
			<view class="header1_left">
			     <text>账户余额</text>
			     <text class="money">{{item.money}}</text>
			 </view>
			 <view class="header1_left">
				<text>代金券</text>
			    <text class="money">{{item.give_money}}</text>
			 </view>
		</view>
	</view>
	<view class="footerButton" v-if="infoShow">
		<view class="backgroundYellow" v-if="oaRole == 1 || oaRole == 3"
		@click="popUp('rechargeShow',item.id)">
			充值
		</view>
		<view class="backgroundGreen" v-if="oaRole == 1 || oaRole == 3"
		@click="popUp('addCardShow',item.id)">
			开卡
		</view>
		<!-- <view class="backgroundRed" v-if="oaRole == 1 || oaRole == 3"
		@click="jumpMark('/manage/mark/add',item.id)">
			预约
		</view> -->
		<view class="backgroundRed" v-if="oaRole == 1 || oaRole == 3"
		@click="popUp('addMarkShow',item.id)">
			预约
		</view> 
	</view>
	<view class="table" v-if="infoShow">
		<view class="table_top table_line">
			<text class="table_top_title border-right">客户资料</text>
			<view class="table_edit1 border-right" v-if="oaRole == 1 || oaRole == 3"
			@click="jump('/manage/member/add',item.id)">
				<view class="table_button">编辑</view>
			</view>
			<view class="table_edit1" v-if="oaRole == 1 || oaRole == 3"
			@click="del(item.id)">
				<image src="/static/img/none_delete.png"></image>
			</view>
		</view>
		<view class="table_center border table_line">
			<text class="table_edit border-right">会员等级:</text>
			<view class="table_top_title">{{item.lv}}</view>
		</view>
		<view class="table_center border table_line">
			<text class="table_edit border-right">会员来源:</text>
			<view class="table_top_title">{{item.source}}</view>
		</view>
		<view class="table_center border table_line">
			<text class="table_edit border-right">客户生日:</text>
			<view class="table_top_title">{{item.birthDay}}</view>
		</view>
		<view class="table_center border table_line">
			<text class="table_edit border-right">结婚纪念日:</text>
			<view class="table_top_title">{{item.marryDay}}</view>
		</view>
		<view class="table_center border table_line">
			<text class="table_edit border-right">子女生日:</text>
			<view class="table_top_title">{{item.sonBirthDay}}</view>
		</view>

		<view class="table_center border table_line">
			<text class="table_edit border-right">客户经理:</text>
			<view class="table_top_title">{{item.user_name}}</view>
		</view>
	</view>
	<view class="table" v-if="infoShow">
		<view class="table_center border border-top table_line">
			<view class="init_line1 border-right">皮肤分析:</view>
			<view class="init_line2 border-right">{{item.skinList}}</view>
			<view class="init_line3" @click="jump('/manage/member/skin',item.id)">
				<view class="table_button">编辑</view>
			</view>
		</view>
		<view class="table_center border table_line">
			<view class="init_line1 border-right">皮肤类型:</view>
			<view class="init_line2 border-right">{{item.skinType}}</view>
			<view class="init_line3" @click="jump('/manage/member/skinType',item.id)">
				<view class="table_button">编辑</view>
			</view>
		</view>
	</view>
	
	<view class="table" v-if="infoShow">
		<view class="table_center border border-top table_line">
			<view class="init_line1 border-right">充值记录:</view>
			<view class="init_line2 border-right">{{item.rechargeCount}}次</view>
			<view class="init_line3" @click="jump('/manage/member/recharge',item.id)">
				更多..
			</view>
		</view>
		<view class="table_center border border-top table_line">
			<view class="init_line1 border-right">购卡记录:</view>
			<view class="init_line2 border-right">{{item.cardCount}}次</view>
			<view class="init_line3" @click="jump('./card',item.id)">
				更多..
			</view>
		</view>
		<view class="table_center border border-top table_line">
			<view class="init_line1 border-right">耗卡记录:</view>
			<view class="init_line2 border-right">{{item.markCount}}次</view>
			<view class="init_line3" @click="jump('./mark',item.id)">
				更多..
			</view>
		</view>
		<view class="table_center border border-top table_line">
			<view class="init_line1 border-right">现金消费:</view>
			<view class="init_line2 border-right">{{item.moneyCount}}元</view>
			<view class="init_line3" @click="jump('./money',item.id)">
				更多..
			</view>
		</view>
		<view class="table_center border border-top table_line">
			<view class="init_line1 border-right">购买产品:</view>
			<view class="init_line2 border-right">{{item.orderCount}}次</view>
			<view class="init_line3" @click="jump('./order',item.id)">
				更多..
			</view>
		</view>
	</view>
	
	<view class="table1" v-if="infoShow">
		<view class="table_top table_line">
			<text class="table_top_title border-right">个人情况</text>
			<view class="table_edit1" @click="jump('./status',item.id)">
				<view class="table_button">编辑</view>
			</view>
		</view>
		<view class="border table_line center">备注:</view>
		<view class="border table_init">{{item.remark}}</view>
	</view>
		
	<button v-if="oaRole == 2" @click="popUp('addMarkShow',item.id)" class="buttonClass">预约</button>
	<!-- <navigator url="/manage/member/add" open-type="navigate"  v-else>
		<button class="buttonClass">添加会员</button>
	</navigator> -->
	<recharge :id="userId" v-if="rechargeShow" @func="close"></recharge>
	<addCard :id="userId" v-if="addCardShow" @func="close"></addCard>
	<addMark :id="userId" :card="card" v-if="addMarkShow" @func="close"></addMark>
	
</view>
</template>
<script>
import request from '@/util/request.js'
import recharge from "@/components/manage/recharge.vue"//充值
import addCard from "@/components/manage/addCard.vue"//开卡
import addMark from "@/components/manage/addMark.vue"//预约
export default {
	data() {
		return {
			//oaRole 1:店长2:员工3:商户
			oaRole:0,
			keyWord:'',
			item:{},
			infoShow:false,
			rechargeShow:false,
			addCardShow:false,
			addMarkShow:false,
			member_id:0,
			card:[]
		}
	},
	components:{recharge,addCard,addMark},
	onLoad:function(e){
		this.oaRole = uni.getStorageSync('oaRole')
		//this.oaRole = 2
		if(e.id){
			uni.showLoading({title:'加载中....'})
			this.member_id = e.id
			this.getFile()
		}
	},
	methods: {
		getFile:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				member_id:this.member_id
			}
			var that = this
			request({
				url: 'manage/member/file',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading()
					that.item = res.data.data
					if(res.data.data){
						that.infoShow = true
					}else{
						that.infoShow = false
					}
				},
			})
		},
		search:function(e){
			if(!e.detail.value){
				this.infoShow = false
				this.item = {}
				return;
			}
			this.member_id = 0
			uni.showLoading({title:'加载中....'})
			var data = {
				keyword:e.detail.value,
				oa_id:uni.getStorageSync('oa_id')
			}
			var that = this
			request({
				url: 'manage/member/search',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading()
					if(res.data.data){
						that.item = res.data.data
						that.infoShow = true
					}else{
						that.infoShow = false
					}
				},
			})
		},
		jump:function(url,id){
			uni.navigateTo({
			  url:url+'?id='+id
			})
		},
		getCard:function(id){
			//查询当前会员是否已经开过卡
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				member_id:id
			}
			var that = this
			request({
				url: 'manage/card/user',
				method: 'get',
				data:data,
				success: (res) => {
					if(res.data.data.length > 0){
						that.card = res.data.data
						that.addMarkShow = true
					}else{
						uni.showToast({
							title: '请先开卡!!',
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})
		},
		popUp:function(key,userId){
			if(this.oaRole !== 1 && this.oaRole !== 3){
				//不是店长和商家得角色  不可 操作
				uni.showToast({
					title: '暂无权限!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			this.userId = userId
			if(key == 'addMarkShow'){
				this.getCard(userId)
				return;
			}
			this[key] = true
		},
		close:function(data){
			this[data.model] = false
			if(data.model !== 'addMarkShow'){
				uni.showLoading({title:'加载中....'})
				if(this.member_id){
					this.getFile()
				}else{
					this.search()
				}
			}
		},
		del:function(id){
			var that = this
			uni.showModal({
				title: '提示',
				content: '是否要删除吗?',
				success: function (res) {
					if (res.confirm) {
						that.putMember(id)
					}else if (res.cancel) {
						//console.log('用户点击取消');
					}
				}
			});
		},
		putMember:function(id){
			var data = {id:id}
			var that = this
			request({
				url: 'manage/member/del',
				method: 'put',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '删除成功!!',
							icon: "success", 
							position:'bottom',
						});
						that.infoShow = false
						that.item = {}
					}else{
						uni.showToast({
							title: '删除失败!!',
							icon: "none", 
							position:'bottom',
						});
					}
				},
			})
		}
	}
}
</script>
<style>
.header{
	width:100%;
	height:80rpx;
	line-height: 80rpx;
	/* background:#FF7800; */
	background:linear-gradient(to right,#FF7800,#ffa14d);
	text-align:center;
	padding-left:10%;
	padding-top:10rpx;
}
.header input{
	width:80%;
	height:60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	border:1rpx solid #fff;
	background:#fff;
	color:#000;
}
.count{
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	color:#FFFFFF;
	background: #009900;
}
.cateCount{
	display:flex;
	flex-direction: row;
	padding-top:20rpx;
}
.cateCount view{
	width:47%;
	background: #FF7800;
	margin-left:2%;
	display:flex;
	flex-direction: column;
	color:#FFFFFF;
	border-radius: 10rpx;
	justify-content: center;
	align-items: center;
	height:120rpx;
}
.table{
	padding:20rpx 20rpx 20rpx 20rpx;
}
.table1{
	padding:20rpx 20rpx 20rpx 20rpx;
	margin-bottom: 140rpx;
}
.table_line{
	height:70rpx;
	line-height: 70rpx;
}
.table_top{
	border:1rpx solid #CCCCCC;
	display: flex;
	flex-direction: row;
	text-align: center;
}
.border-right{
	border-right:1rpx solid #CCCCCC;
}
.border-top{
	border-top:1rpx solid #CCCCCC;
}
.table_top_title{
	width:60%;
}
.table_edit{
	width:30%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.table_edit1{
	width:20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.table_edit1 image{
	width:50rpx;
	height:50rpx;
}
.table_button{
	width:100rpx;
	height:45rpx;
	line-height: 45rpx;
	font-size: 13px;
	background: #009900;
	border-radius: 50rpx;
	color:#FFFFFF;
}
.table_center{
	display: flex;
	flex-direction: row;
	text-align: center;
}
.border{
	border-right:1rpx solid #CCCCCC;
	border-left:1rpx solid #CCCCCC;
	border-bottom:1rpx solid #CCCCCC;
}
.init_line1{
	width:30%;
}
.init_line2{
	width:50%;
}
.init_line3{
	width:20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.table_init{
	min-height: 70rpx;
	display: flex;
	align-items: center;
	padding-left:15rpx;
	padding-right:15rpx;
}
.center{
	text-align: center;
	padding-left:15rpx;
}
.footerButton{
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}
.footerButton view{
	width:31%;
	height:60rpx;
	line-height: 60rpx;
	border-radius: 20rpx;
	margin-left:2%;
	text-align: center;
	color:#FFFFFF;
}
.backgroundYellow{
    background:#FF7800;
}
.backgroundGreen{
    background:#009900;
}
.backgroundRed{
    background:#b30000;
}
.backgroundGrey{
    background:#808080;
}
.header1{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	/* background:#FF7800; */
	background:linear-gradient(to right,#FF7800,#ffa14d);
    padding-top:20rpx;
    padding-bottom: 40rpx;
	color:#FFFFFF;
}
.header1_top{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 15px;
}
.name{
	font-weight: bold;
	font-size:18px;
}
.phone{
	margin-top:15rpx;
	font-size:14px;
}
.footer{
	width:100%;
	display: flex;
	flex-direction: row;
}
.header1_left{
	width:33%;
    display: flex;
    flex-direction:column;
    align-items: center;
}
.money{
	width:70%;
	height:50rpx;
	line-height: 50rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	color:#000000;
	text-align: center;
	margin-top:10rpx;
}
</style>